import React from 'react'
import { Button } from 'antd-mobile'

export default function WeightHeader({ todayWeight, onShowChart, showChart, onOpenDialog }) {
  return (
    <div style={{marginBottom:12}}>
      <div style={{textAlign:'center', marginBottom:12}}>
        <h1 style={{margin:0}}>我的体重记录</h1>
        <p style={{margin:0, color:'#666'}}>追踪你的健康目标，记录每一步的进步</p>
      </div>

      <div style={{background:'#fff', padding:12, borderRadius:8}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12}}>
          <div>
            <div style={{fontSize:12, color:'#666'}}>今天体重</div>
            <div style={{fontSize:24, fontWeight:700}}>{todayWeight ? todayWeight.toFixed(1) : '未'} <span style={{fontSize:14}}>kg</span></div>
          </div>
          {todayWeight && (
            <div style={{background:'#d1fae5', padding:'6px 12px', borderRadius:20}}>
              <div style={{fontSize:12, color:'#065f46'}}>已记录</div>
            </div>
          )}
        </div>

        <div style={{display:'flex', gap:8}}>
          <Button onClick={onOpenDialog} color='primary' style={{display:'inline-flex', alignItems:'center', gap:8}}>
            <span style={{display:'inline-block', width:16, textAlign:'center'}}>＋</span>
            <span>录入体重</span>
          </Button>
          <Button onClick={onShowChart} fill='outline' style={{marginLeft:8}}>
            {showChart ? '隐藏图表' : '展开图表'}
          </Button>
        </div>
      </div>
    </div>
  )
}
